<template>
  <view class="container">
    <view class="second_title">
      <view> Hello, </view>
      <view> welcome! </view>
    </view>
    <view class="main-title"> 踪际 </view>
	<view class="" style="position: relative;">
		<image src="../../static/logo.png" mode="" style="height: 400rpx; width: 400rpx;position: absolute;right: 10rpx; top: -300rpx;"></image>
	</view>
    <view class="background_circle"></view>
    <view>
      <!-- <image src="../../static/loginImg.png" mode="widthFix" style="left: 20rpx"></image> -->
    </view>
    <view style="height: 100px"> </view>
    <button class="login_btn" @click="loginByPhone">手机号一键登录</button>
    <button class="login_btn" @click="loginByAccount">账号密码登录</button>

    <uni-popup ref="popup" background-color="transparent" class="pop-up">
      <view class="login-container">
        <view class="login-item">
          <p class="label">账号:</p>
          <input
            type="text"
            v-model="account"
            placeholder="请输入手机号"
            style="margin-top: 35rpx; color: #fff"
          />
        </view>
        <view class="login-item">
          <p class="label">密码:</p>
          <input
            type="text"
            v-model="password"
            placeholder="请输入密码"
            style="margin-top: 35rpx; color: #fff"
          />
        </view>
        <view style="display: flex; justify-content: center">
          <button @click="loginOrRegister" class="login_button">
            登录/注册
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { request } from '@/service/request.js';
import { onMounted, ref } from 'vue';

const popup = ref();
const account = ref();
const password = ref();
const phoneNumber=ref()
//手机号一键登录
const loginByPhone = () => {
  uni.preLogin({
    provider: 'univerify',
    success(res) {
      //预登录成功
      // 显示一键登录选项
      console.log(res);
      console.log('999', 2222);
      uni.login({
        provider: 'univerify',
        univerifyStyle: {
          // 自定义登录框样式
          //参考`univerifyStyle 数据结构`
          backgroundColor: '#ffffff', // 授权页面背景颜色，默认值：#ffffff
          icon: {
            path: '/static/logo.png', // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
          },
          phoneNum: {
            color: '#000000', // 手机号文字颜色 默认值：#000000
            fontSize: '18', // 手机号字体大小 默认值：18
          },
          slogan: {
            color: '#8a8b90', //  slogan 字体颜色 默认值：#8a8b90
            fontSize: '12', // slogan 字体大小 默认值：12
          },
          authButton: {
            normalColor: '#3479f5', // 授权按钮正常状态背景颜色 默认值：#3479f5
            highlightColor: '#2861c5', // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
            disabledColor: '#73aaf5', // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
            textColor: '#ffffff', // 授权按钮文字颜色 默认值：#ffffff
            title: '本机号码一键登录', // 授权按钮文案 默认值：“本机号码一键登录”
          },
          otherLoginButton: {
            visible: true, // 是否显示其他登录按钮，默认值：true
            normalColor: '#f8f8f8', // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
            highlightColor: '#dedede', // 其他登录按钮按下状态背景颜色 默认值：#dedede
            textColor: '#000000', // 其他登录按钮文字颜色 默认值：#000000
            title: '其他登录方式', // 其他登录方式按钮文字 默认值：“其他登录方式”
            borderWidth: '1px', // 边框宽度 默认值：1px（仅ios支持）
            borderColor: '#c5c5c5', //边框颜色 默认值： #c5c5c5（仅ios支持）
          },
          privacyTerms: {
            defaultCheckBoxState: true, // 条款勾选框初始状态 默认值： true
            textColor: '#8a8b90', // 文字颜色 默认值：#8a8b90
            termsColor: '#1d4788', //  协议文字颜色 默认值： #1d4788
            prefix: '我已阅读并同意', // 条款前的文案 默认值：“我已阅读并同意”
            suffix: '并使用本机号码登录', // 条款后的文案 默认值：“并使用本机号码登录”
            fontSize: '12', // 字体大小 默认值：12,
            privacyItems: [
              // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
              {
                url: 'https://', // 点击跳转的协议详情页面
                title: '用户服务协议', // 协议名称
              },
            ],
          },
        },
        success(res) {
          // 登录成功
          this.openid = res.authResult.openid;
          this.access_token = res.authResult.access_token;
          console.log(res.authResult); // {openid:'deviceIDlength+deviceID+gyuid',access_token:'接口返回的 token'}
          console.log(this.openid);
          console.log('access_token', this.access_token);
          // 客户端(调用云函数)  调用云函数来实现整个业务逻辑
          // 在得到access_token后，通过callfunction调用云函数
          uniCloud
            .callFunction({
              name: 'login', // 你的云函数名称
              data: {
                access_token: this.access_token, // 客户端一键登录接口返回的access_token
                openid: this.openid, // 客户端一键登录接口返回的openid
              },
            })
            .then(async (res) => {
              console.log('获取成功');
              console.log(res);
              // 获取用户的手机号
              phoneNumber.value = res.result.data.phoneNumber;
              console.log(phoneNumber.value);
              uni.setStorageSync('account', phoneNumber.value);
              uni.closeAuthView();

              // let resToken = await request({
              //   url: '/user/loginByAccount',
              //   method: 'POST',
              //   data: {
              //     account: this.phoneNumber,
              //   },
              // });
			  console.log('1111',phoneNumber.value)
			  uni.request({
			  	url:`http://121.199.1.81:8070/user/loginByAccount?account=${phoneNumber.value}`,
				method:'POST',
				success: (res) => {
					console.log(res)
					uni.setStorageSync('authorization', res.data.data.token);
					console.log('登录成功,token是', res.data.data.token);
					uni.setStorageSync('userId', res.data.data.user.id);
				//	uni.setStorageSync('phoneNumber', res.data.user.account);
					//还需要保存用户的account后续使用
					
					//判断如果sex age是-1就跳到新手设置
					uni.switchTab({
					  url: '/pages/main2/main2',
					});
				}
			  })
			  // uni.setStorageSync('authorization', 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIzYTY0N2FkNDc3NDU0NGMzODgwNDc5OWRjZWE4ZjdmNiIsInN1YiI6IjIiLCJpc3MiOiJzZyIsImlhdCI6MTY4NDY4NDMxNCwiZXhwIjoxNjg0Njg3OTE0fQ.YkjHSj3SGbogZEzXjbtd3rrxHlYoY1-YTQxswzIt3fA');
			  // uni.switchTab({
			  //   url: '/pages/main/main',
			  // });
			  
             
            })
            .catch((err) => {
              // 处理错误
              console.log('获取失败');
              console.log(err);
              uni.closeAuthView();
            });
        },
        fail(res) {
          // 登录失败
          // console.log('失败',2222);
          console.log(res.errCode);
          console.log(res.errMsg);
        },
      });
    },
    fail(res) {
      // 预登录失败
      // 不显示一键登录选项（或置灰）
      // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
      console.log('失败', 2222);
      console.log(res.errCode);
      console.log(res.errMsg);
    },
  });
};
const loginOrRegister = async () => {
  //请求登录如果404就注册
  let res = await request({
    url: '/user/login',
    data: {
      account: account.value,
      password: password.value,
    },
  });
  console.log('返回', res);
  if (res == '该账号未注册') {
    let resToken = await request({
      url: '/user/register',
      data: {
        account: account.value,
        password: password.value,
        username: '趣痘小白',
        age: -1,
        sex: -1,
      },
    });
    const { token } = resToken;
    console.log('token是', token);
    if (token == null) {
    }
    if (token != null) {
      successLogin(token, account.value);
    }
    return;
  }
  if (res.code == 400) {
    uni.showToast({
      icon: 'error',
      title: '密码错误',
    });
  }
  if (res.token != null) {
    successLogin(res.token, account.value);
  }
};
const loginByAccount = () => {
  popup.value.open('bottom');
};

const successLogin = (token, account) => {
  uni.setStorageSync('authorization', token);
  uni.setStorageSync('account', account);
  uni.showToast({
    icon: 'success',
    title: '登录成功',
  });
  uni.switchTab({
    url: '/pages/camera/camera',
  });
};

onMounted(()=>{
	let token=uni.getStorageSync('authorization')
	if(token!=null)
	{
		uni.switchTab({
			url:'/pages/main2/main2'
		})
	}
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.second_title {
  font-size: 60rpx;
  margin-top: 190rpx;
  margin-left: 60rpx;
  margin-bottom: 70rpx;
  color: #3479f5;
}

.main-title {
  font-size: 110rpx;
  margin-left: 130rpx;
  font-family: PingFang SC;
  /* font-family: San Francisco; */
}

.background_circle {
  width: 1200rpx;
  height: 1200rpx;
  left: -60rpx;
  top: 530rpx;
  background-color: #87cefa;
  position: absolute;
  border-radius: 50%;
}

.login_btn {
  width: 55%;
  height: 110rpx;
  line-height: 110rpx;
  background-color: #1e90ff;
  color: aliceblue;
  border-radius: 30px;
  margin-top: 65rpx;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 30rpx;
  margin-bottom: 400rpx;
}

.login-item {
  margin: 40rpx;
  margin-left: -20rpx;
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: center;
  background-color: #d1ecf7;
  border-radius: 30px;
  height: 120rpx;
  padding-left: 40rpx;
}

.label {
  display: flex;
  justify-items: center;
  align-items: center;
  font-size: 40rpx;
  font-weight: bold;
  width: 120rpx;
}

.login_button {
  margin-bottom: 60rpx;
  margin-left: -60rpx;
  margin-top: 20rpx;
  width: 400rpx;
  border-radius: 30px;
  height: 100rpx;
  background-color: #3479f5;
  box-shadow: 0px 0px 7px #3479f5;
  color: aliceblue;
  line-height: 100rpx;
}
</style>
